import React from 'react';
import { observer } from 'mobx-react-lite';
import { errorService } from '.';

export const Loading = observer(() => {
  const errors = errorService.state.errors;

  const closeErrorPopup = (item: typeof errors[0]) => {
    errorService.closeErrorPopup(item);
  };

  return (
    <div className="loading-modal">
      {errors.map((item) => (
        <div key={item.id} onClick={() => closeErrorPopup(item)}></div>
      ))}
    </div>
  );
});
